<template>
  <div class="wei">
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2293181_1kaapyioen2.css"
    />
    <div class="lenven">
      <div class="lenvencon">
        <router-link to="/">
          <i class="iconfont icon-Arrow-Left2"></i>
        </router-link>
        <b>课程详情</b>
        <i class="iconfont icon-fenxiang"></i>
      </div>
    </div>

    <div class="xuexi" v-for="(item, i) in xiang" :key="i.id">
      <ul>
        <li>
          <img
            :src="require(`../assets/${item.img}`)"
            alt=""
            style="width:100%;"
          />
        </li>
      </ul>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="介绍" name="first">
          <ul class="wu">
            <li>
              <p>{{ item.title }}</p>

              <h6>{{ item.money }}</h6>
            </li>
          </ul>

          <p class="kang"></p>

          <div class=" navcon">
            <p>适用人群</p>
            <p class="bottom">零基础小白学理财，这门课就够了！</p>
            <p>课程简介</p>
            <p>
              2017年9月12日-9月22日，4周年重磅回馈 <br />
              5折秒杀，低价史无前例，买到即赚到！<br />
            </p>
            <p>
              1、课程是录播还是直播？ 课程采取录播视频+线上作业+直播答疑的形式。
              课程一旦购买后，需在规定时间内完成学习，然后提交作业并参加考试，每一科目都完成后才能进入最后的实践课程，即大作业！完成大作业，达到相应的分数，就可得获得相应科目的职业证书。
              简言之，就是你可以自主安排时间学习教学视频；但需注意在规划的学习周期内完成作业，参加考试。
              2、课程是不是可以一直看？
              产品经理（网易），前端开发，Java开发（web方向），UI设计师，交互设计师、GeekBand微专业课程视频是可以永久观看的。
              其它微专业课程视频由具体微专业开课讲师规定。例如高级人力资源微专业是观看1年；如后期有更改，页面上会标注，但不会影响本期的视频观看时间。
              视频之外的在线服务如考试和在线辅导等仅限于本学期。
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="目录" name="second">
          <el-collapse accordion v-for="(item, i) in pp" :key="i">
            <el-collapse-item>
              <template slot="title">
                {{ item.title }}<i class="header-icon el-icon-info"></i>
              </template>
              <div>
                {{ item.tit }}
              </div>
              <div>
                {{ item.wen }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="评价" name="third">
          <el-row>
            <el-input v-model="rateMsg" placeholder="请填写评论"></el-input>
            <el-button @click="addRate">发送</el-button>
          </el-row>

          <div v-for="item in rate" :key="item.id">
            <ul>
              <li >
                <p class="msg">{{ item.msg }}</p>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="nav">
        <ul>
          <li class="xun">
            <i class="iconfont icon-biaoqianA01_zixun-88"></i><span>咨询</span>
          </li>
          <li><i class="iconfont icon-shoucang"></i> 想学</li>
          <router-link :to="{ path: '/ti', query: { id: xiang[0].id } }">
            <li class="red">
              <i class="iconfont icon-jiahao"></i><span>加入学习</span>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { getxiang, getmk, createRate, getrates } from "@/api";
export default {
  data() {
    return {
      xiang: {},
      activeName: "first",
      pp: [],
      rateMsg: "",
      rate: [],
      // id:''
    };
  },
  mounted() {
    let { id } = this.$route.query;
    getxiang(id).then((res) => {
      this.xiang = res.data;
      // console.log(res, "ssssss");
    });

    getmk().then((res) => {
      this.pp = res.data;
    });
    
    this.addRate();

  },
  methods: {
    handleClick(tab, event) {
      //   console.log(tab, event);
    },
    addRate() {
      if( this.username = JSON.parse(localStorage.getItem("user"))){
             let params = {
               user_id:this.user_id,
               username:this.username,
               xiang:this.xiang.id,
               msg: this.rateMsg,
          // username: this.username,
             };
        createRate(params).then((res) => {
          // this.getrates()
          this.rateMsg = "";
        });
         getrates().then((res) => {
          // console.log(res,"rate")/
          this.rate = res.data;
        });
      }else{
        this.$alert('还没登录','评论失败',{
          confirmButtonText:'去登陆',
          callback:action=>{
            this.$router.history.push("/login")
          }
        })
      }
    },
  },
};
</script>

<style>
.msg{
  width: 97%;
  height: 20px;
  line-height: 20px;
  border-radius:6px ;
  margin: 0 auto;
  border: 1px rgb(167, 165, 165) solid;
  margin-top: 5px;
}
.wei .el-input {
  width: 81%;
}
.xun {
  width: 80px;
  height: 40px;
  border-right: 1px solid #000;
}
.xun i {
  margin-left: 10px;
}
.xun span {
  margin-top: 10px;
  /* margin-left: 10px; */
  display: inline-block;
}
.red {
  width: 200px;
  height: 40px;
  text-align: center;
  background: red;
  color: #fff;
}
.red span {
  display: inline-block;
  margin-top: 10px;
}
.bottom {
  height: 30px;
  border-bottom: 1px solid rgb(206, 202, 202);
}
.navcon {
  width: 95%;
  margin: 0 auto;
}
.navcon p {
  margin-top: 10px;
}
.nav {
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
}
.nav ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
  align-items: center;
  /* margin-top: 10px; */
}
.kang {
  width: 100%;
  height: 10px;
  background: #f4f4f4;
}
.wu {
  width: 100%;
}
.wu li {
  width: 95%;
  margin: 0 auto;
}
.wu p {
  margin-top: 20px;
  width: 100%;
  height: 30px;
  border-bottom: 1px solid rgb(184, 183, 183);
}
.wu h6 {
  height: 40px;
  margin-top: 20px;
  color: red;
  font-size: 20px;
  /* font-weight: 100px; */
}
.lenven {
  width: 100%;
}
.lenvencon {
  width: 95%;
  height: 30px;
  font-size: 25px;
  display: flex;
  justify-content: space-between;
}
.lenvencon i {
  font-size: 25px;
}
.wei .el-tabs__nav-scroll {
  margin-left: 50px;
}
.wei .el-tabs__item {
  padding: 0 50px;
}

.wei .el-tabs__item.is-active {
  color: rgb(51, 128, 7);
}
.wei .el-tabs__active-bar {
  background-color: rgb(51, 128, 7);
}
.wei .el-tabs__header {
  margin: 0 0 2px;
}
.wei .el-tabs__item {
  height: 45px;
}
.wei {
  padding-bottom: 56px;
}
</style>
